<head>
	<script src="libs/kinetic-v3.9.0.js"></script>
	<script>
		function writeMessage(messageLayer, message) {
			var context = messageLayer.getContext();
			messageLayer.clear();
			context.font = "18pt Calibri";
			context.fillStyle = "black";
			context.fillText(message, 10, 25);
		}


		window.onload = function() {
			var stage = new Kinetic.Stage({
				container : "container",
				width : 578,
				height : 200,
				
			});
			var shapesLayer = new Kinetic.Layer();
			var messageLayer = new Kinetic.Layer();

			var r = new Kinetic.Rect({
				x : 190,
				y : 120,
				width:50,
				height:40,
				fill : "#00D2FF",
				stroke : "black",
				strokeWidth : 4,
				draggable:true
			});

			
			r.on("mousemove", function() {
				// var mousePos = stage.getMousePosition();
				var x = r.getAbsolutePosition().x;
				var y = r.getAbsolutePosition().y;
				writeMessage(messageLayer, "x: " + x + ", y: " + y);
			});

			//shapesLayer.add(r);

			var circle = new Kinetic.Circle({
				x : 380,
				y : stage.height / 2,
				radius : 70,
				fill : "red",
				stroke : "black",
				strokeWidth : 4,
				draggable:true
			});

			circle.on("mouseover", function() {
				writeMessage(messageLayer, "Mouseover circle");
			});
			circle.on("mouseout", function() {
				writeMessage(messageLayer, "Mouseout circle");
			});
			circle.on("mousedown", function() {
				writeMessage(messageLayer, "Mousedown circle");
			});
			circle.on("mouseup", function() {
				writeMessage(messageLayer, "Mouseup circle");
			});
			var group=new Kinetic.Group({
				draggable:true
			});
			group.add(circle);
			group.add(r);
			shapesLayer.add(group);

			stage.add(shapesLayer);
			stage.add(messageLayer);
		};

	</script>
</head>
<body onmousedown="return false;">
	<div id="container"></div>
</body>